<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name=" apple-mobile-web-app-capable" />
    <meta content="no" name="apple-touch-fullscreen" />
    <meta content="black" name=" apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection"/>
    <title>商城列表页</title>
    <script src="../js/base.min.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1501678_00z4erv693pyn.css"/>
    <link rel="stylesheet" href="../css/shangcheng.css"/>
</head>
<body>

<header flex="cross:center main:justify">

    <div flex="cross:center">

        <i class="iconfont iconsousuo"></i>
        <input type="text" placeholder="搜索商家，店铺，品牌名。"/>

    </div>

    <p>搜索</p>

</header>

                            <!--楼层1-->

<section class="f1">

    <div flex>

        <div flex="dir:top">
            <img src="../img/jia.png"/><p>家用电器</p>
        </div>

        <div flex="dir:top">
            <img src="../img/shou.png"/><p>手机数码</p>
        </div>

        <div flex="dir:top">
            <img src="../img/dian.png"/><p>电脑办公</p>
        </div>

        <div flex="dir:top">
            <img src="../img/jiaju.png"/><p>家具家纺</p>
        </div>

        <div flex="dir:top">
            <img src="../img/jia.png"/><p>家用电器</p>
        </div>

    </div>

    <button></button>

</section>

                                            <!--楼层2-->

<section class="f2">

    <div class="f2-st" flex>

        <div flex="main:center cross:center">

            <select>

                <option>综合排序</option>
                <option>超值精选</option>
                <option>信用商铺</option>
                <option>便宜好货</option>
                <option>今日爆款</option>

            </select>

        </div>

        <button flex="main:center cross:center">附近商家</button>
        <button flex="main:center cross:center">选择地区</button>

    </div>

    <div>

        <div class="f2-zhuti" flex="cross:center main:justify">

            <a href="#">福州VANS专卖店</a>
            <a href="#"><i class="iconfont iconshangyiye"></i></a>


        </div>

        <div class="f2-shiwu" flex="main:justify cross:center">

            <img src="../img/1.jpg"/>

            <div>
                <h6>福建省福州市鼓楼区鼓山旁福马路君临东城
                    沃尔玛4楼
                </h6>

                <div flex="cross:center">
                    <span>距离670m</span>
                    <span class="a">关注人数103</span>

                    <button>未关注</button>
                </div>


            </div>

        </div>

    </div>

    <div>

        <div class="f2-zhuti" flex="cross:center main:justify">

            <a href="#">福州潮人服饰</a>
            <a href="#"><i class="iconfont iconshangyiye"></i></a>


        </div>

        <div class="f2-shiwu" flex="main:justify cross:center">

            <img src="../img/2.jpg"/>

            <div>
                <h6>福建省福州市仓山区六一南路汇达广场旁服
                    装城103号
                </h6>

                <div flex="cross:center">
                    <span>距离670m</span>
                    <span class="a">关注人数103</span>

                    <button id="b">已关注</button>
                </div>


            </div>

        </div>

    </div>

    <div>

        <div class="f2-zhuti" flex="cross:center main:justify">

            <a href="#">福州VANS专卖店</a>
            <a href="#"><i class="iconfont iconshangyiye"></i></a>


        </div>

        <div class="f2-shiwu" flex="main:justify cross:center">

            <img src="../img/3.jpg"/>

            <div>
                <h6>福建省福州市鼓楼区鼓山旁福马路君临东城
                    沃尔玛4楼
                </h6>

                <div flex="cross:center">
                    <span>距离670m</span>
                    <span class="a">关注人数103</span>

                    <button>未关注</button>
                </div>


            </div>

        </div>

    </div>

    <div>

        <div class="f2-zhuti" flex="cross:center main:justify">

            <a href="#">福州水密码专卖店</a>
            <a href="#"><i class="iconfont iconshangyiye"></i></a>


        </div>

        <div class="f2-shiwu" flex="main:justify cross:center">

            <img src="../img/1.jpg"/>

            <div>
                <h6>福建省福州市鼓楼区鼓山旁福马路君临东城
                    沃尔玛4楼
                </h6>

                <div flex="cross:center">
                    <span>距离670m</span>
                    <span class="a">关注人数103</span>

                    <button>未关注</button>
                </div>


            </div>

        </div>

    </div>


</section>







</body>
</html>